<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>友情链接</title>
        <link
            rel="stylesheet"
            type="text/css"
            href="../assets/lib/layui/css/layui.css"
        />
        <link rel="stylesheet" type="text/css" href="../assets/css/link.css" />
    </head>
    <body>
        <div class="layui-card">
            <div class="layui-card-header">
                <span>友情链接</span>
                <button
                    id="add-link"
                    type="button"
                    class="layui-btn layui-btn-normal"
                >
                    添加链接
                </button>
            </div>
            <div class="layui-card-body">
                <!-- 文章列表的表格 -->
                <table class="layui-table">
                    <colgroup>
                        <col width="5%" />
                        <col width="15%" />
                        <col width="20%" />
                        <col width="30%" />
                        <col width="10%" />
                        <col width="20%" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>链接图标</th>
                            <th>链接名称</th>
                            <th>链接地址</th>
                            <th>链接描述</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 这里放数据 -->
                    </tbody>
                </table>
            </div>
        </div>

        <script type="text/javascript" src="../assets/lib/jquery.js"></script>
        <script type="text/javascript" src="../assets/js/common.js"></script>
        <script
            type="text/javascript"
            src="../assets/lib/layui/layui.all.js"
        ></script>
        <script
            type="text/javascript"
            src="../assets/lib/template-web.js"
        ></script>
        <script type="text/javascript" src="../assets/js/link/link.js"></script>
    </body>
    <script type="text/html" id="add-form-tpl">
        <form id="add-form" class="layui-form" style="margin: 15px 30px 0 0">
            <!-- 第一行：密码 -->
            <div class="layui-form-item">
                <label class="layui-form-label">链接名称</label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        name="linkname"
                        required
                        lay-verify="required"
                        placeholder="请输入链接名称"
                        autocomplete="off"
                        class="layui-input"
                    />
                </div>
            </div>
            <!-- 第二行：确认密码 -->
            <div class="layui-form-item">
                <label class="layui-form-label">链接地址</label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        name="linkurl"
                        required
                        lay-verify="required"
                        placeholder="请输入链接地址"
                        autocomplete="off"
                        class="layui-input"
                    />
                </div>
            </div>
            <!-- 第三行：链接描述 -->
            <div class="layui-form-item">
                <label class="layui-form-label">链接描述</label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        name="linkdesc"
                        required
                        lay-verify="required"
                        placeholder="请输入链接描述"
                        autocomplete="off"
                        class="layui-input"
                    />
                </div>
            </div>
            <!-- 第四行：上传图片 -->
            <div class="layui-form-item">
                <div class="layui-input-block icon-url">
                    <button
                        type="button"
                        class="layui-btn layui-btn-sm"
                        id="urlIcon"
                    >
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <input
                        type="file"
                        name="linkicon"
                        id="linkFile"
                        style="display: none;"
                    />
                    <img id="preIcon" src="" />
                </div>
            </div>
            <!-- 第三行：按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">
                        提交
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">
                        重置
                    </button>
                </div>
            </div>
        </form>
    </script>
    <script type="text/html" id="edit-form-tpl">
        <form
            id="edit-form"
            lay-filter="editForm"
            class="layui-form"
            style="margin: 15px 30px 0 0"
        >
            <div class="layui-form-item">
                <label class="layui-form-label">链接名称</label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        name="linkname"
                        required
                        lay-verify="required"
                        placeholder="请输入链接名称"
                        autocomplete="off"
                        class="layui-input"
                    />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">链接地址</label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        name="linkurl"
                        required
                        lay-verify="required"
                        placeholder="请输入链接地址"
                        autocomplete="off"
                        class="layui-input"
                    />
                </div>
            </div>
            <!-- 第三行：链接描述 -->
            <div class="layui-form-item">
                <label class="layui-form-label">链接描述</label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        name="linkdesc"
                        required
                        lay-verify="required"
                        placeholder="请输入链接描述"
                        autocomplete="off"
                        class="layui-input"
                    />
                </div>
            </div>
            <!-- 第四行：上传图片 -->
            <div class="layui-form-item">
                <div class="layui-input-block icon-url">
                    <button
                        type="button"
                        class="layui-btn layui-btn-sm"
                        id="urlIcon"
                    >
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <input type="file" id="linkFile" style="display: none;" />
                    <img id="preIcon" src="" />
                </div>
            </div>
            <!-- 第三行：按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">
                        提交
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">
                        重置
                    </button>
                </div>
            </div>
        </form>
    </script>
</html>
